<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>转盘活动</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f7f7f7;
    }

    .container {
      position: relative;
      width: 200px;
      height: 200px;
    }

    .wheel {
      width: 100%;
      height: 100%;
      background-image: url(wheel.png);
      background-size: cover;
      background-position: center;
      animation: spin 5s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    .pointer {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40%;
      max-width: 80px;
      animation: spinPointer 5s linear infinite;
    }

    @keyframes spinPointer {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    .form {
      display: none;
    }

    .show-form .form {
      display: block;
      animation: showForm 1s forwards;
    }

    @keyframes showForm {
      0% {
        opacity: 0;
        transform: translateX(100%);
      }
      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .form input {
      width: 100%;
      padding: 10px;
      margin-bottom: 20px;
      border: none;
      border-radius: 5px;
      box-sizing: border-box;
    }

    .form button {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="container">
    <img class="wheel" src="./loto-p.png"></img>
    <img class="pointer" src="./loto-z.png" alt="Pointer">
  </div>

  <div class="form">
    <input type="text" placeholder="请输入姓名">
    <button>提交</button>
  </div>

  <script>
    setTimeout(() => {
      document.querySelector('.container').classList.add('show-form');
    }, 3000);
    setTimeout(() => {
      document.querySelector('.container').style.animation = 'none';
      document.querySelector('.pointer').style.animation = 'none';
    }, 5000);
  </script>
</body>
</html>